<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--可变参数-->
<!--function sum(...num){-->
<!--  consle.log(num)-->
<!--}-->
<!--sum(20,30,40,50,60)-->
<!--此处的...就是表示可变参数-->



<div id="app">
  <ul>
    <li v-for="item in letters">
      {{item}}
    </li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>


<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
           letters: ['a','b','c','d','e']
        },
        methods:{
            btnClick(){
            //    1.push方法
            //     this.letters.push('aaa','bbb','ccc')

            //    2.通过索引值修改数组中的元素,这个不是响应式的
            //     this.letters[0] = 'bbbbbb'

            //以下方式是响应式的    push()    pop()    shift()     unshift()     splice()   sort()    reverse()
            //    注意：通过索引值来修改数组不是相应式的！！！！！！



            //     this.letters.pop();
            // 从数组的最后删除元素

             // this.letters.shift()
             //删除数组中的第一个元素

             // this.letters.unshift('zzzz','xxxx','yyyy')
            //在数组的最前面添加元素

            //    splice:删除元素/插入元素/替换元素
            //    第一个参数表示开始位置
            //    只填一个参数时，会把从这个位置开始，后面的元素全部删掉
            //    删除元素的时候，第二参数传入你要删除几个元素

            //    替换元素：第二个参数表示要替换几个元素，后面是用来替换前面的元素
            //    插入元素：第二个参数传入0，后面跟上要插入的元素
            // this.letters.splice(1,0,'aaaa','bbbb','cccc')

            //    this.letters.sort()
            //    this.letters.reverse()


            //    VUE的方法set(要修改的对象，索引值，修改后的值),这个是VUE内部的一种方法，也是响应式的
            //    vue.set(this.letters,0,'bbbbb')

            }
        }
    })
</script>
</body>
</html>